
<template>
  <div>
    <el-table v-if="tableList.length" :data="tableList" border>
      <el-table-column
        label="月份"
        align="center"
        prop="year"
      ></el-table-column>
      <template>
        <el-table-column
         v-for="(month, idx) in months" :key="idx"
          :label="month.label"
          align="center"
        >
        <template slot-scope="scope"> 
          <div v-if="scope.row[month.prop]">{{ scope.row[month.prop] }}</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      </template>
      <el-table-column label="合计" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.add">{{ scope.row.add }}</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-else style="text-align: center; margin: 20px;">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "MonthlyTable",
  props: {
    tableList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      months: [
        { label: '1月', prop: '1' },
        { label: '2月', prop: '2' },
        { label: '3月', prop: '3' },
        { label: '4月', prop: '4' },
        { label: '5月', prop: '5' },
        { label: '6月', prop: '6' },
        { label: '7月', prop: '7' },
        { label: '8月', prop: '8' },
        { label: '9月', prop: '9' },
        { label: '10月', prop: '10' },
        { label: '11月', prop: '11' },
        { label: '12月', prop: '12' }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
/* 添加样式以提高可读性和美观性 */
.el-table {
  width: 100%;
  border-radius: 5px;
}
</style>
